<template>
    <div class="apiList">
        <p class="mun">资源目录中心/目录列表</p>
        <div class="mun2">
            <span class="mun2_name">资源目录中心</span>
            <span class="mun2_time">更新时间：2020/12/07 13:17:02</span>
        </div>
        <div class="card">
            <div class="top">
                <div class="top_word">
                    API列表
                </div>
<!--                <div class="top_left">-->
<!--                    <el-input v-model="input" placeholder="请输入内容" class="top_left_input"></el-input>-->
<!--                    <el-button class="top_left_button">搜索</el-button>-->
<!--                </div>-->
            </div>
            <el-divider></el-divider>
            <div class="content">
                <div class="left">
                    <el-collapse v-model="activeNames" >
                        <el-collapse-item title="家园码信息服务平台" name="1">
                            <el-tabs tab-position="left" style="height: 260px;"
                                     router
                                     @tab-click="handleClick"
                            >
                                <el-tab-pane label="工程建设项目家园码溯源"  index="Interface01"></el-tab-pane>
                                <el-tab-pane label="书证家园码溯源" index="Interface02"></el-tab-pane>
                                <el-tab-pane label="用户家园码溯源" index="Interface03"></el-tab-pane>
                                <el-tab-pane label="家园码信息修改" index="Interface04"></el-tab-pane>
                            </el-tabs>
                        </el-collapse-item>
                    </el-collapse>
                </div>
                <div class="right">
                    <el-menu :default-active="activeIndex"  mode="horizontal" @select="handleSelect">
                        <el-menu-item index="1" disabled>代码示例</el-menu-item>
                        <el-menu-item index="2" disabled>CLI示例</el-menu-item>
                        <el-menu-item index="3" disabled>调试结果</el-menu-item>
                        <el-menu-item index="4">文档</el-menu-item>
                        <el-menu-item index="5" disabled>模拟数据</el-menu-item>
                        <el-menu-item index="6" disabled>场景示例</el-menu-item>
                    </el-menu>
                    <router-view></router-view>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "index",
        data() {
            return {
                defaultActive:'Interface01',
                activeNames: ['1'],
                activeIndex: '4',
                tableData1:[
                    {
                        name:'X-Auth-Token',
                        type:'string',
                        in:'header',
                        necessary:'是',
                        describe:'用户Token。\n' +
                            '通过调用服务获取用户Token接口获取(响应消息头中X-Subject-Token的值)。'
                    },
                    {
                        name:'project_id',
                        type:'string',
                        in:'path',
                        necessary:'是',
                        describe:'工程建设项目ID。'
                    },
                    {
                        name:'document_id',
                        type:'string',
                        in:'path',
                        necessary:'否',
                        describe:'书证文件ID。'
                    },
                    {
                        name:'user_id',
                        type:'string',
                        in:'path',
                        necessary:'否',
                        describe:'用户ID。'
                    },
                ]
            };
        },
        mounted(){

        },
        methods:{

            handleClick(tab) {
                console.log(tab);
                this.$router.push({
                    name:tab.$attrs.index
                })
            },
        }
    }
</script>

<style lang="less">
    .apiList{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        .mun{
            width: 126px;
            height: 17px;
            opacity: 0.6;
            font-size: 12px;
            font-family: PingFang SC, PingFang SC-Medium;
            font-weight: 500;
            text-align: left;
            color: #000000;
            line-height: 22px;
        }
        .mun2{
            margin-top: 6px;
            margin-bottom: 10px;
            .mun2_name{
                width: 108px;
                height: 25px;
                font-size: 18px;
                font-family: PingFang SC, PingFang SC-Heavy;
                font-weight: 800;
                text-align: left;
                color: #000000;
                line-height: 22px;
            }
            .mun2_time{
                margin-left: 12px;
                width: 183px;
                height: 17px;
                opacity: 0.8;
                font-size: 12px;
                font-family: PingFang SC, PingFang SC-Medium;
                font-weight: 500;
                text-align: left;
                color: #000000;
                line-height: 22px;
            }
        }
        .card{
            width: 1600px;
            padding-bottom: 5px;
            /*height: 975px;*/
            background: #ffffff;
            border-radius: 8px;
            box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.06);
            padding-left: 24px;
            padding-right: 30px;
            .top{
                height: 50px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .top_word{
                    width: 64px;
                    height: 50px;
                    font-size: 16px;
                    font-family: PingFang SC, PingFang SC-Bold;
                    font-weight: 700;
                    text-align: left;
                    color: #5b8ff9;
                    border-bottom: 3px solid #5B8FF9;
                    line-height: 50px;
                }
                .top_left{
                    display: flex;
                    /*justify-content: space-between;*/
                    align-items: center;
                    .top_left_input{
                        width: 313px;
                        height: 36px;
                        border-radius: 5px;

                    }
                    .top_left_button{
                        margin-left: 10px;
                        font-size: 14px;
                        font-weight: 400;
                        text-align: left;
                        color: #ffffff;
                        width: 64px;
                        height: 40px;
                        background: linear-gradient(135deg,#5b8ff9 1%, #1ffce5 97%);
                        border-radius: 5px;
                    }
                }
            }
            .el-divider--horizontal{
                margin-top: 0px;
                width: 96%;
                margin-left: 4%;
                background-color: rgb(242,242,242);
            }
            .content{
                display: flex;
                .left{
                    width: 300px;
                    .el-collapse-item__header{
                        font-size: 16px;
                        font-family: PingFang SC, PingFang SC-Medium;
                        font-weight: 500;
                        text-align: left;
                        color: #000000;

                    }
                    .el-collapse-item__wrap{
                        border-bottom:none;
                        border-top:none;
                    }
                    .el-tabs--left .el-tabs__active-bar.is-left, .el-tabs--left .el-tabs__nav-wrap.is-left::after{
                        height: 160px;
                        left: 0px;
                    }
                    .el-tabs--left .el-tabs__item.is-left{
                        text-align: left;
                    }

                }
                .right{
                    margin-left: 50px;
                    .el-menu-item.is-disabled{
                        opacity: 2.25;
                    }
                    .el-menu--horizontal>.el-menu-item.is-active{
                        border-bottom: 3px solid #5b8ff9;
                        color: #5b8ff9;
                    }
                    .el-menu-item{
                        font-weight: 800;
                    }
                    .el-menu.el-menu--horizontal{
                        border-bottom: solid 1px rgb(242,242,242);
                    }
                }
            }
        }
    }
</style>
